<template>
    <Layout dis-hover>
        <div :style="{ width: '100%', height: divHeight }">
            <Split v-model="split1">
                <div slot="left" class="demo-split-pane">
                    <Tree
                            :render="renderContent"
                            :data="treeData"
                            ref="tree"
                    ></Tree>
                    <Dropdown
                            trigger="click"
                            style="margin-left:20px"
                            placement="right-start"
                            ref="contentMenu"
                            @on-click="selectTreeItem">
                        <DropdownMenu slot="list">
                            <DropdownItem name="addPoint" v-if="showAddPoint"
                            >新增</DropdownItem
                            >
                            <DropdownItem name="editPoint" v-if="showModifyPoint"
                            >修改</DropdownItem
                            >
                            <DropdownItem name="deletePoint" v-if="showModifyPoint"
                            >删除</DropdownItem
                            >
                        </DropdownMenu>
                    </Dropdown>
                </div>
                <div slot="right" class="demo-split-pane">
                    <Form :label-width="90" ref="formInline" :model="formInline">
                        <Row :gutter="16" class="query-form" style="margin-left: 10px">
                            <i-col span="8">
                                <FormItem label="标题名称：">
                                    <Input v-model="formInline.name"
                                           placeholder="请输入标题名称"
                                    />
                                </FormItem>
                            </i-col>
                            <i-col span="16">
                                <div style="float: right">
                                    <Button class="ivu-btn-reset" @click="cancel">重置</Button>
                                    <Button
                                            class="ivu-btn-query"
                                            icon="md-search"
                                            @click="query()"
                                    >查询</Button>
                                </div>
                            </i-col>
                        </Row>
                    </Form>
                    <Row
                            type="flex"
                            justify="start"
                            v-show="addButten"
                            class="query-form"
                            style="margin-left: 10px"
                    >
                        <i-col>
                            <Button class="ivu-btn-add" icon="md-add" @click="add"
                            >新增</Button
                            >
                        </i-col>
                    </Row>
                    <Table
                            ref="table"
                            style="margin-top: 10px;margin-left: 10px"
                            :loading="loading"
                            border
                            :columns="Columns"
                            :data="infos"
                            width="100%"
                            :height="tableHeight"
                            highlight-row
                            stripe
                            size="small"
                    ></Table>
                    <Row type="flex" justify="end" style="margin-top: 10px">
                        <i-col>
                            <Page
                                    :total="pagedata.total"
                                    :current="pagedata.currentPage"
                                    :page-size="pagedata.pageSize"
                                    @on-page-size-change="pageSizeChange"
                                    @on-change="pageChange"
                                    :page-size-opts="pageSizeArray"
                                    show-total
                                    show-sizer
                                    show-elevator
                            />
                        </i-col>
                    </Row>
                </div>
            </Split>
            <Modal
                    v-model="modal1"
                    title="培训资料信息"
                    width="600"
                    :mask-closable="false">
                <Form
                        ref="formCustom1"
                        :model="form1data"
                        :rules="ruleCustom"
                        label-position="top"
                        enctype="multipart/form-data"
                >
                    <Row>
                        <i-col>
                            <FormItem label="资料名称：" prop="title">
                                <Input v-model="form1data.title" placeholder="请输入资料名称" />
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col>
                            <FormItem label="类型：" prop="type">
                                <Select v-model="categoryType" @on-change="changeType">
                                    <Option value="video">视频</Option>
                                    <Option value="pdf">PDF文档</Option>
                                </Select>
                            </FormItem>
                        </i-col>
                        <i-col>
                            <FormItem label="序号：" prop="sort">
                                <Input v-model="form1data.sort" placeholder="请输入序号" />
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row  v-if="categoryType == ''">
                        <i-col>
                            <FormItem  label="附件上传："  prop="files"></FormItem>
                        </i-col>
                    </Row>
                    <Row  v-if="form1data.type == 'pdf'">
                        <i-col>
                            <FormItem  label="附件上传："  prop="files">
                                <Upload
                                        :show-upload-list="false"
                                        name="files"
                                        ref="docUpload"
                                        :before-upload="beforeUpload"
                                        type="drag"
                                        accept="application/pdf"
                                        :format="['pdf']"
                                        :action="fileUrl"
                                >
                                    <div style="padding: 20px 0">
                                        <Icon
                                                type="ios-cloud-upload"
                                                size="52"
                                                style="color: #3399ff"
                                        ></Icon>
                                        <p>请选择附件</p>
                                        <span style="font-size:8px;color: #797a64"
                                        >支持扩展名：.pdf</span
                                        >
                                    </div>
                                </Upload>
                                <div v-for="(item, index) in fileList" :key="index">
                                    <a>{{item.name}}</a>
                                    <Button type="text" icon="md-trash" @click="handleRemove(item)"  style="margin-left: 10px;margin-bottom: 3px"/>
                                    <Progress  v-show="filePercentVisible[index]" :percent="filePercent[index]"></Progress>
                                </div>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row  v-if="form1data.type == 'video'">
                        <i-col>
                            <FormItem   label="附件上传："  prop="files">
                                <Upload
                                        :show-upload-list="false"
                                        name="files"
                                        ref="docUpload"
                                        :before-upload="beforeUpload"
                                        type="drag"
                                        accept="application/mp4"
                                        :format="['mp4']"
                                        :action="fileUrl"
                                >
                                    <div style="padding: 20px 0">
                                        <Icon
                                                type="ios-cloud-upload"
                                                size="52"
                                                style="color: #3399ff"
                                        ></Icon>
                                        <p>请选择附件</p>
                                        <span style="font-size:8px;color: #797a64"
                                        >支持扩展名：.mp4</span
                                        >
                                    </div>
                                </Upload>
                                <div v-for="(item, index) in fileList" :key="index">
                                    <a>{{item.name}}</a>
                                    <Button type="text" icon="md-trash" @click="handleRemove(item)"  style="margin-left: 10px;margin-bottom: 3px"/>
                                    <Progress  v-show="filePercentVisible[index]" :percent="filePercent[index]"></Progress>
                                </div>
                            </FormItem>
                        </i-col>
                    </Row>
                </Form>
                <div slot="footer">
                    <Button class="ivu-btn-save" @click="saveInfo">保存</Button>
                    <Button class="ivu-btn-cancel" @click="closeModal">取消</Button>
                </div>
            </Modal>

            <Modal
                    v-model="isShow"
                    :title="selectNodeInfo.title + (isUpdate ? '修改' : '新增')"
                    width="600"
                    :mask-closable="false"
                    @on-cancel="isShow = false;formItem = {};">
                <div style="margin: 0 20px" v-if="isShow">
                    <Form :model="formItem" ref="formCustom" :rules="ruleCustom">
                        <Row>
                            <i-col>
                                <FormItem label="功能名称" prop="name">
                                    <Input
                                            type="text"
                                            v-model="formItem.name"
                                            placeholder="请输入功能名称"
                                    ></Input>
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row>
                            <i-col>
                                <FormItem label="排序" prop="seq">
                                    <Input
                                            type="text"
                                            v-model="formItem.seq"
                                            placeholder="请输入排序"
                                    ></Input>
                                </FormItem>
                            </i-col>
                        </Row>
                    </Form>
                </div>
                <div slot="footer">
                    <Button class='ivu-btn-save' v-if="showEdit" @click="save">确定</Button>
                    <Button  class='ivu-btn-cancel' @click="isShow=false;formItem={}">取消</Button>
                </div>
            </Modal>
        </div>
    </Layout>
</template>

<script>
    import { Api } from "@/api/index.js";
    import { sessionStorage } from "@/common/cacheUtils.js";

    export default {
        name: "materialsTree",
        data() {
            return {
                categoryType:"",
                filePercent:[],
                filePercentVisible:[],
                currentUser: JSON.parse(sessionStorage("userId").get("userId")),
                fileUrl:"",
                pdfUrl: "",
                materialsId: "",
                categoryId: "",
                type:"",
                isUpdate: false,
                fileList: [],
                tableHeight: "",
                divHeight: "",
                loading: false,
                split1: 0.25,
                treeData: [
                    {
                        categoryId : '0',
                        title : '培训资料',
                        parentId:'-1',
                        seq: 1,
                        children: []
                    }
                ],
                modal1: false,
                isShow: false,
                showEdit: false,
                formItem: {
                    name :""
                },
                selectNodeInfo: { title: "" },
                selectNode : {},
                selectRoot : {},
                showAddPoint: false,
                showModifyPoint:false,
                formInline: {},
                form1data: {},
                Columns: [
                    {
                        type: "index",
                        title: "编号",
                        width: 80,
                        align: "center"
                    },
                    {
                        title: "资料名称",
                        align: "center",
                        key: "title",
                        render: (h, params) => {
                            return h("div", [h("span", params.row.title || "--")]);
                        }
                    },
                    {
                        width: 120,
                        title: "创建时间",
                        align: "center",
                        key: "createDateStr",
                        render: (h, params) => {
                            return h("div", [h("span", params.row.createDateStr || "--")]);
                        }
                    },
                    {
                        width: 120,
                        title: "创建人",
                        align: "center",
                        key: "createUserName"
                    },
                    {
                        title: "操作",
                        align: "center",
                        width: "200",
                        key: "updateDate",
                        render: (h, params) => {
                            let flag =
                                this.currentUser.loginId === this.Common.admin ||
                                this.currentUser.userId === params.row.createUserId ||
							    this.currentUser.userBeHandedOver.find(obj => obj == params.row.createUserId) != undefined ||
                                (this.currentUser.userRole.find(
                                    obj => obj.roleId == "73b38b37dff64392ba0ee7dd579bf293"
                                    ) != undefined &&
                                    params.row.orgCode &&
                                    params.row.orgCode.indexOf(this.currentUser.companyCode) != -1);
                            return h("div", [
                                h(
                                    "A",
                                    {
                                        props: { type: "primary", size: "small" },
                                        style: {
                                            fontSize: "14px",
                                            color: flag ? "" : "#c5c8ce",
                                            pointerEvents: flag ? "" : "none"
                                        },
                                        on: {
                                            click: () => {
                                                this.update(params.row);
                                            }
                                        }
                                    },
                                    "修改"
                                ),
                                h(
                                    "Divider",
                                    {
                                        props: {
                                            type: "vertical"
                                        }
                                    },
                                    ""
                                ),
                                h(
                                    "A",
                                    {
                                        props: { type: "primary", size: "small" },
                                        style: {
                                            fontSize: "14px",
                                            color: flag ? "red" : "#c5c8ce",
                                            pointerEvents: flag ? "" : "none"
                                        },
                                        on: {
                                            click: () => {
                                                this.delete(params.row);
                                            }
                                        }
                                    },
                                    "删除"
                                ),
                                h(
                                    "Divider",
                                    {
                                        props: {
                                            type: "vertical"
                                        }
                                    },
                                    ""
                                ),
                                h(
                                    "A",
                                    {
                                        props: { type: "primary", size: "small" },
                                        style: { fontSize: "14px", color: "red" },
                                        on: {
                                            click: () => {
                                                this.downloadFile(params.row,params.row.type);
                                            }
                                        }
                                    },
                                    "下载"
                                )
                            ]);
                        }
                    }
                ],
                infos: [],
                pageSizeArray: [10, 20, 50],
                pagedata: {
                    total: 0,
                    pageSize: 10,
                    currentPage: 1
                },
                ruleCustom: {
                    title: [
                        {
                            required: true,
                            message: "  ",
                            trigger: "blur"
                        }
                    ],
                    type: [
                        {
                            required: true,
                            message: "  ",
                            trigger: "blur"
                        }
                    ],
                    files: [
                        {
                            validator: (rule, value, callback) => {
                                if (this.fileList && this.fileList.Length === 0) {
                                    callback(new Error('文件必传'))
                                } else {
                                    callback()
                                }
                            },
                            required: true,
                            trigger: 'change'
                        }
                    ],
                },
                imgBase64: "",
                addButten: false
            };
        },
        mounted() {
            this.divHeight = window.innerHeight - 135 + "px";
            this.tableHeight = window.innerHeight - 305;
            this.categoryId = -1;
            this.queryTree(this.treeData[0]);
        },
        methods: {
            changeType(val){
                this.$set(this.form1data,'type',val);
            },
            queryTree(parentNode) {
                this.$http
                    .get(Api.trainingCategory, { params: { parentId: parentNode.categoryId } })
                    .then(res => {
                        var datas = res.data;
                        this.$set(parentNode,'expand',true);
                        this.$set(parentNode,'children',datas);
                    });
            },
            renderContent(h, { root, node, data }) {
                return h(
                    "span",
                    {
                        style: {
                            display: "inline-block",
                            cursor: "pointer"
                        },
                        on: {
                            click: () => {
                                this.addButten=false
                                if (data.categoryId != '0') {
                                    this.addButten=true
                                }
                                this.selectNodeInfo = data;
                                this.categoryId = data.categoryId;
                                this.formItem = {}
                                this.query(data.categoryId);
                                this.queryTree(data);
                            },
                            contextmenu: (e) => {
                                this.showAddPoint = true;
                                if(data.categoryId == 0){
                                    this.showModifyPoint = false;
                                }else {
                                    this.showModifyPoint = true;
                                }
                                e.preventDefault();
                                this.selectNodeInfo = data;
                                this.selectNode = node;
                                this.selectRoot = root;
                                this.$refs.contentMenu.$refs.reference = event.target;
                                this.$refs.contentMenu.currentVisible = !this.$refs.contentMenu.currentVisible;
                            },
                        }
                    },
                    [
                        h("span", [
                            h("Icon", {
                                props: {
                                    type: "ios-folder-outline"
                                },
                                style: {
                                    marginRight: "8px"
                                }
                            }),
                            h("span", data.title)
                        ])
                    ]
                );
            },
            query() {
                this.loading = true;
                let data = {
                    page: this.pagedata.currentPage,
                    rows: this.pagedata.pageSize,
                    categoryId: this.selectNodeInfo.categoryId,
                    type: this.selectNodeInfo.type
                };
                data = Object.assign(data, JSON.parse(JSON.stringify(this.formInline)));
                this.$http
                    .get(Api.trainingInfo, {
                        params: data
                    })
                    .then(res => {
                        this.infos = res.data.data;
                        this.pagedata.total = res.data.totalSize;
                        this.loading = false;
                    })
                    .catch(e => {
                        this.$Message.error("请求失败");
                    });
            },
            cancel() {
                this.formInline = {};
                this.query();
            },
            add() {
                this.filePercent=[];
                this.filePercentVisible=[];
                this.fileList = [];
                this.form1data = {};
                this.isUpdate = false;
                this.trainingId = this.uuid();
                this.form1data.type = "";
                this.categoryType = "";
                this.form1data.categoryId = this.selectNodeInfo.categoryId
                this.pdfUrl = Api.uploadPTWFiles + "/" + this.trainingId + "/files/video";
                this.modal1 = true;
            },
            downloadFile(file,type) {
                this.$Loading.start();
                this.fileUrl = Api.uploadPTWFiles + "/" + file.id + "/files/" + type;
                this.$http
                    .get(this.fileUrl, {
                        params: {}
                    })
                    .then(res => {
                        this.$Loading.finish();
                        this.$Loading.start();
                        if (res.data.result == "success") {
                            if (res.data.data.length != 0) {
                                this.$Modal.confirm({
                                    title: "文件下载",
                                    content: "<p>是否确定下载</p>",
                                    okText: "确认",
                                    onOk: () => {
                                        var config = {
                                            progress: function (e) {
                                                if(e.lengthComputable){
                                                    if(e.loaded == e.total){
                                                        this.$Loading.finish();
                                                    }
                                                }
                                            }
                                        }
                                        this.$http
                                            .get(Api.uploadPTWFiles + "/file/" + res.data.data[0].id, {
                                                responseType: "blob" //告诉服务器我们需要的响应格式
                                            },config)
                                            .then(res1 => {
                                                const aLink = document.createElement("a");
                                                let blob = new Blob([res1.data], {
                                                    type: res1.bodyBlob.type //将会被放入到blob中的数组内容的MIME类型
                                                });
                                                aLink.href = URL.createObjectURL(blob);
                                                aLink.download = res.data.data[0].fileName; //标题
                                                aLink.click();
                                                document.body.appendChild(aLink);
                                            });
                                    },
                                    onCancel: ()=>{
                                        this.$Loading.error();
                                    }
                                });
                            }
                        }else{
                            this.$Loading.error();
                        }
                    },function(E){
                        this.$Loading.error();
                    });
            },
            update(row) {
                this.isUpdate = true;
                this.filePercent=[];
                this.filePercentVisible=[];
                this.form1data = JSON.parse(JSON.stringify(row));
                this.fileList = [];
                if(row.fileId != null){
                    this.fileList.push({
                        name:row.fileName,
                        id: row.fileId
                    });
                }
                this.categoryType = this.form1data.type;
                this.modal1 = true;
            },
            delete(row) {
                this.$Modal.confirm({
                    title: "数据删除",
                    content: "<p>确定删除该数据</p>",
                    okText: "确认",
                    onOk: () => {
                        let data = sessionStorage("userId").getObject("userId");
                        this.$http
                            .delete(Api.trainingInfo, {
                                params: { id: row.id, updateUserId: data.userId,fileId:row.fileId }
                            })
                            .then(res => {
                                this.handleRemove({id:row.fileId});
                                this.query();
                                this.$Message.success({
                                    content: "删除成功",
                                    duration: 4
                                });
                            })
                            .catch(e => {
                                this.$Message.error({
                                    content: "请求失败",
                                    duration: 4
                                });
                            });
                    }
                });
            },
            async beforeUpload (file) {
                if(this.fileList.length>0){
                    this.$Message.error("仅支持上传单个文件");
                    return false;
                }
                if(this.form1data.type == 'pdf'){
                    if (file.name.toLowerCase().indexOf(".pdf") > 0) {
                    } else {
                        this.$Message.error("仅支持上传pdf,请重新选择文件");
                        return false;
                    }
                }else{
                    if (file.name.toLowerCase().indexOf(".mp4") > 0) {
                    } else {
                        this.$Message.error("仅支持上传mp4,请重新选择文件");
                        return false;
                    }
                }
                this.fileList=[];
                this.filePercent[this.fileList.length]=0;
                this.filePercentVisible[this.fileList.length]=false;
                this.fileList.push(file);
                if(this.form1data.id  == null){
                    this.form1data.id  = this.uuid()
                }
                let formData = new FormData();
                formData.append("files", this.fileList[0]);
                let url = Api.uploadPTWFiles  + '/' + this.form1data.id + '/files/' +this.form1data.type;
                var _this = this;
                var config = {
                    progress: function (e) {
                        _this.$set(_this.filePercentVisible,0,true);
                        if(e.lengthComputable){
                            _this.$set(_this.filePercent,0, 100 * (e.loaded / e.total));
                        }
                    }
                }
                await this.$http.post(url, formData,config).then((res) => {

                })
                return false;
            },
            pageSizeChange(pageSize) {
                this.pagedata.pageSize = pageSize;
                this.query();
            },
            pageChange(pageNum) {
                this.pagedata.currentPage = pageNum;
                this.query();
            },
            selectTreeItem(name) {
                if (name == "addPoint") {
                    this.formItem = {}
                    this.isUpdate = false;
                    this.showEdit = true;
                    this.isShow = true;
                    this.formItem.parentId = this.selectNodeInfo.categoryId;
                } else if (name == "editPoint") {
                    this.isUpdate = true;
                    this.showEdit = true;
                    this.isShow = true;
                    this.formItem = {
                        categoryId: this.selectNodeInfo.categoryId,
                        parentId:  this.selectNodeInfo.parentId,
                        name: this.selectNodeInfo.title,
                        seq: this.selectNodeInfo.seq
                    };
                } else if (name == "deletePoint") {
                    this.$Modal.confirm({
                        title: "数据删除",
                        content: "<p>确定删除该分类</p>",
                        okText: "确认",
                        onOk: () => {
                            let data = sessionStorage("userId").getObject("userId");
                            this.$http
                                .delete(Api.trainingCategory, {
                                    params: {
                                        categoryId: this.selectNodeInfo.categoryId,
                                        updateUserId: data.userId
                                    }
                                })
                                .then(res => {
                                    const parentKey = this.selectRoot.find(
                                        el => el === this.selectNode
                                    ).parent;
                                    const parent = this.selectRoot.find(
                                        el => el.nodeKey === parentKey
                                    ).node;
                                    for (let i = 0; i < parent.children.length; i++) {
                                        if (parent.children[i].menuId == this.selectNodeInfo.menuId) {
                                            parent.children.splice(i, 1);
                                            this.$Message.success("删除成功");
                                            this.queryTree(parent);
                                            this.query();
                                            return;
                                        }
                                    }
                                    this.queryTree(parent);
                                    this.query();
                                    this.$Message.success({
                                        content: "删除成功",
                                        duration: 4
                                    });
                                })
                                .catch(e => {
                                    this.$Message.error({
                                        content: "请求失败",
                                        duration: 4
                                    });
                                });
                        },
                        cancelText: "取消"
                    });
                }
            },
            saveInfo() {
                this.$refs["formCustom1"].validate(valid => {
                    if (valid) {
                        let data = sessionStorage("userId").getObject("userId");
                        if (this.isUpdate) {
                            this.form1data.updateUserId = data.userId;
                            this.$http
                                .put(Api.trainingInfo, this.form1data)
                                .then(res => {
                                    this.query();
                                    this.$Message.success({
                                        content: "保存成功",
                                        duration: 4
                                    });
                                    this.closeModal();
                                })
                                .catch(e => {
                                    this.$Message.error({
                                        content: "请求失败",
                                        duration: 4
                                    });
                                });
                        } else {
                            this.form1data.categoryId = this.categoryId;
                            this.form1data.createUserId = data.userId;
                            this.$http
                                .post(Api.trainingInfo, this.form1data)
                                .then(res => {
                                    this.query();
                                    this.$Message.success({
                                        content: "保存成功",
                                        duration: 4
                                    });
                                    this.closeModal();
                                })
                                .catch(e => {
                                    this.$Message.error({
                                        content: "请求失败",
                                        duration: 4
                                    });
                                });
                        }
                    }
                });
            },
            handleRemove(file) {
                this.fileList = [];
                if(file.id != null){
                    this.$http
                        .delete(
                            Api.uploadPTWFiles + "/" + this.form1data.id + "/files/" + file.id,
                            { params: {} }
                        )
                        .then(res => {
                            if (res.data.result == "success") {

                            }
                        });
                }
            },
            closeModal() {
                this.modal1 = false;
                this.form1data = {};
            },
            save() {
                this.$refs["formCustom"].validate(valid => {
                    if (valid) {
                        let data = sessionStorage("userId").getObject("userId");
                        let parent = null;
                        if(this.selectNode.node.parentId == "-1"){
                            parent = this.selectNode;
                        }else {
                            const parentKey = this.selectRoot.find(
                                el => el === this.selectNode
                            ).parent;
                            parent = this.selectRoot.find(
                                el => el.nodeKey === parentKey
                            ).node;
                        }
                        if (this.isUpdate) {
                            this.formItem.updateUserId = data.userId;
                            this.$http
                                .put(Api.trainingCategory, this.formItem)
                                .then(res => {
                                    this.queryTree(parent);
                                    this.isShow = false;
                                    this.$Message.success({
                                        content: "保存成功",
                                        duration: 4
                                    });
                                })
                                .catch(e => {
                                    this.$Message.error({
                                        content: "请求失败",
                                        duration: 4
                                    });
                                });
                        } else {
                            this.formItem.categoryId = this.uuid();
                            this.formItem.createUserId = data.userId;
                            this.$http
                                .post(Api.trainingCategory, this.formItem)
                                .then(res => {
                                    this.queryTree(this.selectNode.node);
                                    this.isShow = false;
                                    this.$Message.success({
                                        content: "保存成功",
                                        duration: 4
                                    });
                                })
                                .catch(e => {
                                    this.$Message.error({
                                        content: "请求失败",
                                        duration: 4
                                    });
                                });
                        }
                    }
                });
            },
            uuid() {
                let s = [];
                let hexDigits = "0123456789abcdef";
                for (let i = 0; i < 32; i++) {
                    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
                }
                s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
                s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
                let uuid = s.join("");
                return uuid;
            }
        }
    };
</script>

<style scoped>
    @import "../../../../index.css";
    .upload-list {
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        margin-right: 4px;
    }

    .upload-list-cover {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.6);
    }

    .upload-list-cover {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.6);
    }

    .upload-list:hover .upload-list-cover {
        display: block;
    }

    .upload-list-cover i {
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
</style>
